<template>
  <div class="home-container">
    <HomeHeader></HomeHeader>
    <div class="home">
      <!-- 主页其他内容 -->
      <div class="home-content">
        <div class="content-layout">
          <!-- 左侧博客列表 -->
          <div class="blog-list">
            <div v-for="blog in currentPageBlogs" :key="blog.id" class="blog-card">
              <div class="blog-header">
                <h2 class="blog-title" @click="router.push(`/blog/${blog.id}`)">{{ blog.title }}</h2>
                <div class="blog-meta">
                  <span><el-icon><Calendar /></el-icon>{{ blog.date }}</span>
                  <span><el-icon><View /></el-icon>{{ blog.views }}阅读</span>
                  <span><el-icon><ChatLineRound /></el-icon>{{ blog.comments }}评论</span>
                </div>
              </div>
              <div class="blog-cover" v-if="blog.cover">
                <img :src="blog.cover" :alt="blog.title">
              </div>
              <p class="blog-summary">{{ blog.summary }}</p>
              <div class="blog-footer">
                <div class="blog-tags">
                  <el-tag v-for="tag in blog.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
                </div>
                <el-button type="primary" text @click="router.push(`/blog/${blog.id}`)">
                  阅读全文<el-icon class="el-icon--right"><ArrowRight /></el-icon>
                </el-button>
              </div>
            </div>
            <Pagination 
              v-model="currentPage"
              :total="blogs.length"
              :page-size="pageSize"
            />
          </div>

          <!-- 右侧边栏 -->
          <div class="sidebar">
            <!-- 个人信息卡片 -->
            <div class="sidebar-card profile-card">
              <div class="profile-header">
                <img :src="avatarImage" alt="avatar" class="profile-avatar">
                <h3>博主昵称</h3>
                <p class="profile-desc">这里是个性签名，写点有趣的介绍</p>
              </div>
              <div class="profile-stats">
                <div class="stat-item">
                  <div class="stat-num">123</div>
                  <div class="stat-label">文章</div>
                </div>
                <div class="stat-item">
                  <div class="stat-num">56</div>
                  <div class="stat-label">标签</div>
                </div>
                <div class="stat-item">
                  <div class="stat-num">789</div>
                  <div class="stat-label">评论</div>
                </div>
              </div>
            </div>

            <!-- 公告卡片 -->
            <div class="sidebar-card notice-card">
              <h3 class="card-title"><el-icon><Bell /></el-icon>公告</h3>
              <div class="notice-content">
                欢迎来到我的博客！这里会分享一些技术文章和生活感悟...
              </div>
            </div>

            <!-- 日历卡片 -->
            <div class="sidebar-card calendar-card">
              <h3 class="card-title">
                <el-icon><Calendar /></el-icon>
                日历
              </h3>
              <VCalendar
                :attributes="calendarAttributes"
                is-expanded
                transparent
                :masks="masks"
                class="custom-calendar"
              />
            </div>

            <!-- 随机文章卡片 -->
            <div class="sidebar-card random-posts-card">
              <h3 class="card-title">
                <el-icon><Refresh /></el-icon>
                随机文章
              </h3>
              <ul class="post-list">
                <li v-for="post in randomPosts" :key="post.id" @click="router.push(`/blog/${post.id}`)">
                  {{ post.title }}
                </li>
              </ul>
            </div>

            <!-- 作者推荐卡片 -->
            <div class="sidebar-card featured-card">
              <h3 class="card-title"><el-icon><Star /></el-icon>作者推荐</h3>
              <ul class="post-list">
                <li v-for="post in featuredPosts" :key="post.id" @click="router.push(`/blog/${post.id}`)">
                  {{ post.title }}
                </li>
              </ul>
            </div>

            <!-- 最新评论卡片 -->
            <div class="sidebar-card comments-card">
              <h3 class="card-title"><el-icon><ChatDotSquare /></el-icon>最新评论</h3>
              <div class="comment-list">
                <div v-for="comment in recentComments" :key="comment.id" class="comment-item">
                  <img :src="comment.avatar" :alt="comment.author" class="comment-avatar">
                  <div class="comment-content">
                    <div class="comment-author">{{ comment.author }}</div>
                    <div class="comment-text">{{ comment.content }}</div>
                    <div class="comment-post">评论于：{{ comment.postTitle }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  Calendar,
  View,
  ChatLineRound,
  ArrowRight,
  Bell,
  Star,
  ChatDotSquare,
  Refresh
} from '@element-plus/icons-vue'
import { Calendar as VCalendar } from 'v-calendar'
import 'v-calendar/style.css'

// 引入首页头部部分
import HomeHeader from '@/components/home-header.vue'
import Pagination from '@/components/pagination.vue'


// 导入图片
import avatarImage from '@/assets/images/avatar.jpg'
import blogCoverImage from '@/assets/images/1.png'
import commentAvatarImage from '@/assets/images/2.jpg'

const router = useRouter()
const route = useRoute()

// 示例博客数据
const blogs = ref([
  {
    id: 1,
    title: '2024年前端开发趋势展望',
    date: '2024-01-10',
    views: 1234,
    comments: 56,
    cover: blogCoverImage,
    summary: '随着技术的不断发展，前端开发领域在2024年将迎来新的机遇和挑战...',
    tags: ['前端', 'Web开发', '技术趋势']
  },
  // ... 添加更多博客数据
  {
    id: 2,
    title: '2024年前端开发趋势展望',
    date: '2024-01-12',
    views: 1234,
    comments: 56,
    cover: blogCoverImage,
    summary: '随着技术的不断发展，前端开发领域在2024年将迎来新的机遇和挑战...',
    tags: ['前端', 'Web开发', '技术趋势']
  },
  {
    id: 3,
    title: '2024年前端开发趋势展望',
    date: '2024-01-14',
    views: 1234,
    comments: 56,
    cover: blogCoverImage,
    summary: '随着技术的不断发展，前端开发领域在2024年将迎来新的机遇和挑战...',
    tags: ['前端', 'Web开发', '技术趋势']
  },
  {
    id: 4,
    title: '2024年前端开发趋势展望',
    date: '2024-01-16',
    views: 1234,
    comments: 56,
    cover: blogCoverImage,
    summary: '随着技术的不断发展，前端开发领域在2024年将迎来新的机遇和挑战...',
    tags: ['前端', 'Web开发', '技术趋势']
  },
  {
    id: 5,
    title: '2024年前端开发趋势展望',
    date: '2024-01-18',
    views: 1234,
    comments: 56,
    cover: blogCoverImage,
    summary: '随着技术的不断发展，前端开发领域在2024年将迎来新的机遇和挑战...',
    tags: ['前端', 'Web开发', '技术趋势']
  },
  {
    id: 6,
    title: '2024年前端开发趋势展望',
    date: '2024-01-20',
    views: 1234,
    comments: 56,
    cover: blogCoverImage,
    summary: '随着技术的不断发展，前端开发领域在2024年将迎来新的机遇和挑战...',
    tags: ['前端', 'Web开发', '技术趋势']
  },
])

// 随机文章数据
const randomPosts = ref([
  { id: 1, title: 'Vue3 组合式API最佳实践' },
  { id: 2, title: 'TypeScript 高级特性详解' },
  { id: 3, title: '前端性能优化技巧' },
  { id: 4, title: 'CSS Grid 布局完全指南' },
  { id: 5, title: 'JavaScript 设计模式解析' }
])

// 推荐文章数据
const featuredPosts = ref([
  { id: 1, title: '深入理解Vue3响应式原理' },
  { id: 2, title: 'React Hooks 实战指南' },
  { id: 3, title: 'Node.js 性能调优技巧' },
  { id: 4, title: '微前端架构实践' },
  { id: 5, title: 'Webpack5 新特性解析' }
])

// 最新评论数据
const recentComments = ref([
  {
    id: 1,
    author: '张三',
    avatar: commentAvatarImage,
    content: '文章写得很好，学习了！',
    postTitle: 'Vue3 组合式API最佳实践'
  },
  // ... 添加更多评论数据
])

// 添加日历配置
const masks = {
  weekdays: 'WW',
  title: 'YYYY年 MMMM',
}

// 添加日历标记
const calendarAttributes = [
  {
    key: 'today',
    highlight: {
      color: 'var(--el-color-primary)',
      fillMode: 'solid',
    },
    dates: new Date(),
  },
  {
    highlight: {
      color: 'var(--el-color-success)',
      fillMode: 'light',
    },
    dates: [
      new Date(2024, 0, 1),  // 示例日期，你可以根据需要修改
      new Date(2024, 0, 15),
      new Date(2024, 0, 20),
    ],
    popover: {
      label: '有文章发布',
    }
  }
]

// 在 script setup 中添加分页相关的数据
const currentPage = ref(1)
const pageSize = 5

// 修改 currentPageBlogs 计算属性
const currentPageBlogs = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  const end = start + pageSize
  return blogs.value.slice(start, end)
})

</script>

<style scoped>
.home-container {
  min-height: 100vh;
  width: 100vw;
  background-color: #ffffff;
  transition: all 0.3s ease;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.home-container.dark-mode {
  background-color: #1a1a1a;
}

/* 深色模式下的其他样式调整 */
.dark-mode :deep(.content-section) {
  background-color: #242424;
  color: #e5eaf3;
}

.dark-mode :deep(.card) {
  background-color: #2c2c2c;
  border-color: #363637;
}

.dark-mode :deep(.text) {
  color: #e5eaf3;
}

/* 添加过渡效果 */
.home-container,
.home-container * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.home {
  width: 100%;
  height: 100%;
}

.home-content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}


.content-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 博客列表样式 */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-card {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  animation: cardAppear 0.6s ease-out forwards;
  opacity: 0;
  transform: scale(0.9);
  filter: blur(10px);
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.blog-title {
  font-size: 1.5rem;
  margin: 0 0 10px;
  cursor: pointer;
  color: var(--el-text-color-primary);
}

.blog-title:hover {
  color: var(--el-color-primary);
}

.blog-meta {
  display: flex;
  gap: 15px;
  color: var(--el-text-color-secondary);
  font-size: 0.9rem;
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-cover {
  margin: 15px 0;
  border-radius: 8px;
  overflow: hidden;
}

.blog-cover img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-summary {
  color: var(--el-text-color-regular);
  margin: 15px 0;
  line-height: 1.6;
}

.blog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.blog-tags {
  display: flex;
  gap: 8px;
}

/* 侧边栏样式 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  animation: sidebarCardAppear 0.6s ease-out forwards;
  opacity: 0;
  transform: scale(0.9);
  filter: blur(10px);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  font-size: 1.1rem;
  color: var(--el-text-color-primary);
}

/* 个人信息卡片样式 */
.profile-card {
  text-align: center;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
  transition: transform 0.6s ease;
  cursor: pointer;
}

/* 鼠标悬停时顺时针旋转 */
.profile-avatar:hover {
  animation: rotateClockwise 0.6s ease forwards;
}

/* 鼠标离开时逆时针旋转 */
.profile-avatar:not(:hover) {
  animation: rotateCounterClockwise 0.6s ease forwards;
}

@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounterClockwise {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.profile-desc {
  color: var(--el-text-color-secondary);
  margin: 10px 0;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 15px;
  border-top: 1px solid var(--el-border-color-lighter);
  padding-top: 15px;
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--el-color-primary);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--el-text-color-secondary);
}

/* 公告卡片样式 */
.notice-content {
  color: var(--el-text-color-regular);
  line-height: 1.6;
}

/* 自定义日历样式 */
.calendar-card {
  padding: 15px 15px 10px;
}

:deep(.custom-calendar) {
  --vc-font-family: var(--el-font-family);
  --vc-text-sm: 0.875rem;
  --vc-text-base: 1rem;
  --vc-bg-light: var(--el-bg-color-page);
  --vc-border-light: var(--el-border-color-lighter);
  --vc-rounded-full: 9999px;
  --vc-color-blue-500: var(--el-color-primary);
  --vc-color-blue-600: var(--el-color-primary-light-3);
  --vc-color-gray-900: var(--el-text-color-primary);
  --vc-color-gray-700: var(--el-text-color-regular);
  --vc-color-gray-500: var(--el-text-color-secondary);
  --vc-color-gray-400: var(--el-border-color);
  --vc-color-gray-300: var(--el-border-color-lighter);
}

:deep(.custom-calendar .vc-header) {
  padding: 0;
  margin-bottom: 10px;
}

:deep(.custom-calendar .vc-title) {
  font-size: var(--vc-text-base);
  color: var(--el-text-color-primary);
  line-height: 1.5;
  padding: 4px 8px;
}

:deep(.custom-calendar .vc-weekdays) {
  margin-top: 10px;
  border-top: 1px solid var(--el-border-color-lighter);
  padding-top: 10px;
}

:deep(.custom-calendar .vc-weeks) {
  padding: 0;
}

:deep(.custom-calendar .vc-day) {
  padding: 3px 0;
}

:deep(.custom-calendar .vc-day-content) {
  font-size: var(--vc-text-sm);
  width: 28px;
  height: 28px;
}

:deep(.custom-calendar .vc-arrow) {
  width: 24px;
  height: 24px;
  background: transparent;
  color: var(--el-text-color-secondary);
  margin: 0 4px;
}

:deep(.custom-calendar .vc-arrow:hover) {
  background: var(--el-border-color-extra-light);
  border-radius: 4px;
}

/* 深色模式适配 */
html.dark :deep(.custom-calendar) {
  --vc-bg-light: var(--el-bg-color-overlay);
  --vc-border-light: var(--el-border-color-darker);
}

html.dark :deep(.custom-calendar .vc-weekdays) {
  border-top-color: var(--el-border-color-darker);
}

/* 文章列表样式 */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  padding: 8px 0;
  cursor: pointer;
  color: var(--el-text-color-regular);
  transition: all 0.3s;
}

.post-list li:hover {
  color: var(--el-color-primary);
  padding-left: 8px;
}

/* 评论列表样式 */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.comment-item {
  display: flex;
  gap: 10px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-content {
  flex: 1;
}

.comment-author {
  font-weight: bold;
  color: var(--el-text-color-primary);
}

.comment-text {
  color: var(--el-text-color-regular);
  margin: 4px 0;
}

.comment-post {
  font-size: 0.9rem;
  color: var(--el-text-color-secondary);
}

/* 深色模式适配 */
html.dark .blog-card,
html.dark .sidebar-card {
  background: var(--el-bg-color-overlay);
}

/* 添加博客卡片的出现动画 */
@keyframes cardAppear {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* 为每个卡片添加延迟动画 */
.blog-card:nth-child(1) { animation-delay: 0.1s; }
.blog-card:nth-child(2) { animation-delay: 0.2s; }
.blog-card:nth-child(3) { animation-delay: 0.3s; }
.blog-card:nth-child(4) { animation-delay: 0.4s; }
.blog-card:nth-child(5) { animation-delay: 0.5s; }

/* 添加侧边栏卡片的出现动画 */
@keyframes sidebarCardAppear {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* 为每个侧边栏卡片添加延迟动画 */
.profile-card { animation-delay: 0.1s; }
.notice-card { animation-delay: 0.2s; }
.calendar-card { animation-delay: 0.3s; }
.random-posts-card { animation-delay: 0.4s; }
.featured-card { animation-delay: 0.5s; }
.comments-card { animation-delay: 0.6s; }
</style>
